<template>
  <div id="centreRight2">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="align-left"></icon>
        </span>
        <span class="fs-xl text mx-2">30天系统用电分析</span>
        <dv-decoration-2 style="width:100px;height:5px;" />
      </div>
      <div class="d-flex jc-center body-box" style=" margin-top: 0;">
        <dv-capsule-chart :config="config" style="width: 90%;height:2rem" />
        <!-- ---------------------------------------- -->
        <centreRight2Chart1 :chart-data="centerData"  />
      </div>
    </div>
  </div>
</template>

<script>
import centreRight2Chart1 from "@/components/echart/centerRight/centerRightChart";

export default {
  props: {
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      centerData: {
        faultDevice:[]
      },
      config: {
        data: [
          {
            name: "照明",
            value: 0
          },
          {
            name: "新风",
            value: 0
          },
          {
            name: "排风",
            value: 0
          },
          {
            name: "控制器",
            value: 0
          },
          {
            name: "空调",
            value: 0
          }
        ]
      }
    };
  },
  components: { centreRight2Chart1 },
  created() {
  },
  watch: {
    chartData: {
      handler (newData) {
          this.setOptions(newData.energy)
          this.centerData = newData
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    setOptions({deviceEnergy} ={}){
        if (deviceEnergy=== null || typeof(deviceEnergy) === 'undefined' ){
          return
        }
        this.config ={
          data: this.getData(deviceEnergy),
          showValue: true
        }
    },
    getData(device){
      const array = []
      for (const deviceElement of device) {
         let name = ''
         switch (deviceElement.deviceType)
         {
           case '1':
             name = '照明'
             break
           case '2':
             name = '送排风系统'
             break
           case '3':
             name = '排风'
             break
           case '4':
             name = '新风'
             break
           case '5':
             name = '空调'
             break
         }
         array.push({
           name: name,
           value: deviceElement.energy
         })
      }
      return array;
    }
  }
};
</script>

<style lang="scss">
#centreRight2 {
  padding: 0.0625rem;
  height: 5rem;
  min-width: 3.75rem;
  border-radius: 0.0625rem;
  .bg-color-black {
    padding: 0.0625rem;
    height: 5.0625rem;
    border-radius: 0.125rem;
  }
  .text {
    color: #c3cbde;
  }
  .body-box {
    border-radius: 0.125rem;
    overflow: hidden;
  }
}
</style>
